<template>
  <div>{{ route.meta.title }}</div>
<!--  <div>{{reportStore.reportFileName}}</div>-->
<!--  <button @click="changeName">点击</button>-->
  <!--  <el-button @click="goChild('/center/centerChildOne')">goChild</el-button>-->
  <!--  <el-button @click="goChild('/center/centerChildTwo')">goChildTwo</el-button>-->
  <!--  <el-button @click="add">加一</el-button>-->
  <!--  <router-view></router-view>-->
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
  >
    <el-form-item label="Password" prop="pass">
      <el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
    </el-form-item>
    <el-form-item label="Confirm" prop="checkPass">
      <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="Phone" prop="phone">
      <el-input
          v-model="ruleForm.phone"
          type="text"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="Age" prop="age">
      <el-input v-model.number="ruleForm.age"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
      >Submit
      </el-button
      >
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {useRoute, useRouter} from 'vue-router'
import systemStore from "../../store/modules/system/system";
import {reactive, ref} from 'vue'
import valiFunCom from "@/utils/valiFunCom";
let system = systemStore()
import useReportStore from "@/store/modules/report/report";

let reportStore = useReportStore()
//路由相关
const route = useRoute()
const router = useRouter()

console.log(router)

const goChild = (path: string) => {
  router.push(
      {
        path: path,
        query: {
          child: '123456'
        }
      }
  )
}

const add = () => {
  system.add(1)
  console.log(system.a)
}

import type {FormInstance, FormItemRule, FormRules} from 'element-plus'
import {valiType} from "@/utils/commonType";

const ruleFormRef = ref<FormInstance>()


const checkAge = (rule: any, value: any, callback: any) => {
  console.log(rule, value, callback, '----------')
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
  console.log(value, rule, callback)
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
  phone:''
})
const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{validator: validatePass, trigger: 'blur', valiType: '133'} as valiType],
  checkPass: [{validator: validatePass2, trigger: 'blur'}],
  age: [{validator: checkAge, trigger: 'blur'}],
  phone:[{validator: valiFunCom, trigger: 'blur', valiType: 'phoneReg'} as valiType],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}



</script>

<style scoped>

</style>
